<!--  -->
<template>
<div id=''>
    <div class="tab-control">
        <div class="tab-control-item" :class="{active:index===currentIndex}" v-for="(item,index) in titles" :key="item.index" @click="itemClick(index)">
            <span>{{item}}</span>
        </div>
    </div>
</div>
</template>

<script>

export default {
components: {},
props:{
    titles:{
        type:Array,
        default(){
            return[]
        }
    }
},
data() {
return {
    currentIndex:0
};
},
computed: {},
watch: {},
methods: {
    itemClick(index){
        this.currentIndex=index;
        this.$emit('tabClick',index);
    }
},
created() {

},
mounted() {

},
updated() {},
}
</script>
<style lang='less' scoped>
//@import url();
.tab-control{
    display: flex;
    .tab-control-item{
        flex: 1;
        height: 40px;
        line-height: 40px;
        text-align: center;
        span{
            padding: 0 2px 2px 2px;
        }
    }
}
.active{
    color: palevioletred;
    span{
        border-bottom: 2px solid palevioletred;
    }
}

</style>